<template>
	<div ref="refPl" class="player" :id="id">
	</div>
</template>
<script setup>
	import {
		onMounted,
		onUnmounted,
		nextTick,
		computed,
		reactive,
		watch,
		ref,
		toRefs
	} from "vue";
	import cPlayer from "./ws-play.js";
	const emit =
		/*事件抛出
			//外层绑定@callOut="hOnFn"
		*/
		defineEmits(['callOut']),
		/*属性定义
			数据绑定v-bind:dat="dat"  
			const dat=ref({});
		*/
		props = defineProps({
			realplay: {
				type: String,
				default: null
			}, //'ws://10.19.147.22:559/EUrl/q2jQie4';
			mode: {
				type: Number,
				default: 1,
			} //0：普通模式，1:高级模式
		});

	//播放句柄
	let _player = null;
	const refPl = ref(null);
	const id = "wsWin" + new Date().getTime() + Math.random().toString(32).slice(2, 10);
	watch(refPl, (dom) => {
		setTimeout(() => {
			_player = new cPlayer(id);
			if (props.realplay) {
				call.play(props.realplay);
			}
			callOut({
				h: "onDone",
				d: ""
			})
		}, 500);
	})
	watch(props, pro => {
		if (pro.realplay) {
			call.play(pro.realplay);
		}
	});

	//全屏
	const hFullScreen = () => {
		_player.JS_FullScreenDisplay(true).then(
			() => {
				console.log(`wholeFullScreen success`)
			},
			e => {
				console.error(e)
			}
		)
	}

	const call = {
		play: ws => {
			console.log("播放", ws);
			_player.hPlay(ws);
		},
		stop: () => {
			_player.hStop();
		},
		fullScreen: () => {
			_player.hFullScreen();
		},
		setSplit: (split) => {
			_player.hSetSplit(split);
		}
	}

	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		call
	});

	//触发
	const callOut = (t) => {
		emit('callOut', t);
	}
	onUnmounted(() => {
		//store.state.camName = "";
		_player = null;
	})
	onMounted(() => nextTick(() => {}));
</script>

<style scoped lang="scss">
	.player {
		width: 100% !important;
		height: 100% !important;
		margin: 0 auto;
		background-color: #222;
	}
</style>